<template>
  <v-container>
    <v-toolbar flat color="white">
      <v-toolbar-title>管理人员名单</v-toolbar-title>
      <v-divider class="mx-2" inset vertical></v-divider>
      <v-spacer></v-spacer>
      <v-dialog v-model="dialog" max-width="500px">
        <v-btn slot="activator" color="primary" dark class="mb-2">添&nbsp;加</v-btn>
        <v-card>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
          </v-card-title>

          <v-card-text>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex xs12 sm6 md4>
                  <v-text-field v-model="editedItem.username" label="用户名"></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 md4>
                  <v-text-field v-model="editedItem.password" label="密码"></v-text-field>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="save">保存</v-btn>
            <v-btn color="blue darken-1" flat @click="close">取消</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-toolbar>
    <v-data-table :headers="headers" :items="all" class="elevation-1" :rows-per-page-items="[5]">
      <template
        slot="items"
        slot-scope="props"
        v-if="props.item.username && props.item.username.length"
      >
        <td>{{ props.item.serialno }}</td>
        <td class="text-xs-left">{{ props.item.username }}</td>
        <td class="text-xs-left">{{props.item.password && props.item.password.trim() ? '******':''}}</td>
        <td class="justify-start layout px-0">
          <v-icon
            small
            class="mr-3"
            @click="editItem(props.item)"
            style="font-size: 2rem; margin-top: .5rem;"
            title="修改"
          >fa fa-edit</v-icon>
          <v-icon
            small
            @click="deleteItem(props.item)"
            style="font-size: 2rem; margin-top: .5rem;"
            title="删除"
          >fa fa-remove</v-icon>
        </td>
      </template>
      <template slot="no-data">
        <div style="display: block; width: 100%; text-align: center;">
          <h3>暂无管理人员，请添加！</h3>
        </div>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data: () => ({
    dialog: false,
    headers: [
      {
        text: "序号",
        align: "left",
        sortable: true,
        value: "serialno"
      },
      { text: "管理员名", value: "username", sortable: true },
      { text: "密码", value: "password", sortable: false },
      { text: "操作", value: "name", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      username: "",
      password: ""
    },
    defaultItem: {
      username: "",
      password: ""
    }
  }),

  mounted() {
    // console.log(this.all);
  },

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "添加新管理员" : "修改管理员信息";
    },

    ...mapGetters("startmenu", ["all", "admin_counts"])
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  methods: {
    ...mapActions("startmenu", ["insert", "remove", "modify"]),
    editItem(item) {
      this.editedIndex = this.all.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      console.log(this.admin_counts)
      if(this.admin_counts == 1){
        alert("至少需要保留一位管理员！")
        return
      }
      // const index = this.all.indexOf(item);
      confirm(`是否删除管理员：${item.username}?`) && this.remove(item);
    },

    close() {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },

    save() {
      if(!this.editedItem.username.trim() || !this.editedItem.password.trim()) return
      if (this.editedIndex > -1) {
        this.modify({ obj: this.all[this.editedIndex], uval: this.editedItem });
      } else {
        this.insert(this.editedItem);
      }
      this.close();
    }
  }
};
</script>

<style>
</style>


